<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content>.mui-table-view:first-child {
				margin-top: 0;
			}
			#title{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				float: left;
			}
			#time{
				color: #777;
				font-size: 15px;
			}
			.mui-table-view-chevron .mui-table-view-cell {
				padding-right: 15px;
			}
			.mui-table-view-cell{
				padding-top: 7px;
				padding-bottom: 0;
			}
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
			.mui-table{
				padding-bottom: 3px;
			}
			</style>
	</head>

	<body>
		<div class="mui-content">
			<ul id="apply-list" class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle">
						<div class="mui-table">
							<span id="title">惠普上海有限公司</span><br />
							<span id="time">2015-03-20 05:07</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				swipeBack: false
			});
			(function($) {
				var btnArray = ['确认', '取消'];
				$('#apply-list').on('tap', '.mui-btn', function(event) {
					var elem = this;
					mui.confirm('确认删除这条安排？',btnArray, function(e) {
						if (e.index == 0) {
							var li = elem.parentNode.parentNode;
							//在此处通知服务器端删除这条安排
							li.parentNode.removeChild(li);
						}
					});
				});
			})(mui);
		</script>
	</body>

</html>